<template>
  <div class="no-data flex flex-center">
    <!-- <NoDataImage v-if="showImage" :style="{ ...(imageStyle || {}) }" /> -->
    <img v-if="showImage" :src="NoDataImage" :style="{ ...(imageStyle || {}) }" />
    <div v-if="!!text" class="no-data-text"> {{ text }}</div>
  </div>
</template>

<script lang="ts" setup>
// import NoDataImage from './no-data-image.vue';
import NoDataImage from 'src/assets/no-data.png';

const props = defineProps({
  showImage: {
    type: Boolean,
    default: true,
  },
  text: {
    type: String,
  },
  imageStyle: {
    type: Object,
    default: () => {
      return { height: '120px' };
    },
  },
});
</script>

<style scoped>
.no-data {
  flex-direction: column;
}
.no-data-text {
  height: 14px;
  line-height: 14px;
  color: #3333338f;
  font-size: 14px;
}
</style>
